<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .custom-table,
    .custom-table tr,
    .custom-table th,
    .custom-table td {
        border: 1px solid #bbb;
    }

    .custom-table {
        border-collapse: collapse;
        text-align: center;
    }

    .custom-table th,
    .custom-table td {
        width: 100px;
        height: 48px;
    }
</style>

<body>
    <div id="box"></div>
    <script>
        // var data = [{
        //     StudentNumber: 2022003,
        //     Chinese: 86,
        //     Math: 64,
        //     English: 80,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022004,
        //     Chinese: 78,
        //     Math: 99,
        //     English: 91,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022005,
        //     Chinese: 107.5,
        //     Math: 97,
        //     English: 70,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022006,
        //     Chinese: 112,
        //     Math: 61,
        //     English: 92,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022007,
        //     Chinese: 101,
        //     Math: 79,
        //     English: 104,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022008,
        //     Chinese: 71,
        //     Math: 72,
        //     English: 105,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022009,
        //     Chinese: 56,
        //     Math: 68,
        //     English: 61,
        //     TotalScore: "",
        //     Comment: ""
        // },
        // {
        //     StudentNumber: 2022010,
        //     Chinese: 98,
        //     Math: 83,
        //     English: 77,
        //     TotalScore: "",
        //     Comment: ""
        // }
        // ];
        // <table class="custom-table">
        //     <tr>
        //         <th>学号</th>
        //         <th>语文</th>
        //         <th>数学</th>
        //         <th>英语</th>
        //         <th>总分</th>
        //         <th>评价</th>
        //     </tr>
        //     <tr>
        //         <td>2022003</td>
        //         <td>86</td>
        //         <td>64</td>
        //         <td>80</td>
        //         <td>200</td>
        //         <td>C</td>
        //     </tr>
        // </table>
        var data = [
            { StudentNumber: 2022003, Chinese: 86, Math: 64, English: 80, TotalScore: "", Comment: "" },
            { StudentNumber: 2022004, Chinese: 78, Math: 99, English: 91, TotalScore: "", Comment: "" },
            { StudentNumber: 2022005, Chinese: 107.5, Math: 97, English: 70, TotalScore: "", Comment: "" },
            { StudentNumber: 2022006, Chinese: 112, Math: 61, English: 92, TotalScore: "", Comment: "" },
            { StudentNumber: 2022007, Chinese: 101, Math: 79, English: 104, TotalScore: "", Comment: "" },
            { StudentNumber: 2022008, Chinese: 71, Math: 72, English: 105, TotalScore: "", Comment: "" },
            { StudentNumber: 2022009, Chinese: 56, Math: 68, English: 61, TotalScore: "", Comment: "" },
            { StudentNumber: 2022010, Chinese: 98, Math: 83, English: 77, TotalScore: "", Comment: "" }
        ];

        // 构造函数
        function ScoreHandling(data) {
            this.data = data;
        }
        ScoreHandling.prototype.scoreSort = function (data, subject, subjectText) {
            let _data = data;
            _data.sort(function (a, b) {
                // console.log(a, b);
                return b[subject] - a[subject];
            })
            document.write(subjectText + '第一名是：' + _data[0].StudentNumber + '；成绩值为：' + _data[0][subject]);
            document.write('<br>');
        }

        ScoreHandling.prototype.outputScore = function () {
            let _data = this.data;
            for (let stu of _data) {
                stu.TotalScore = stu.Chinese + stu.Math + stu.English;
                var stuscore = (stu.TotalScore / 3).toFixed(1);
                if (stuscore >= 110) {
                    stu.Comment = "A";
                } else if (stuscore >= 100) {
                    stu.Comment = "B";
                } else if (stuscore >= 90) {
                    stu.Comment = "C";
                } else if (stuscore >= 72) {
                    stu.Comment = "D";
                } else {
                    stu.Comment = "E";
                }
            }

        }

        var score01 = new ScoreHandling(data);
        score01.outputScore();
        var _data = score01.data;
        // console.log(_data);

        // 改写 Table 构造函数，实现数据自动渲染
        function Table(data) {
            // 自身的属性
            this.data = data;
        }
        Table.prototype.createTable = function () {
            let _data = this.data;
            var _html =
                '<table class="custom-table"><tr><th>学号</th><th>语文</th><th>数学</th><th>英语</th><th>总分</th><th>评价</th></tr>';
            for (let a = 0; a < _data.length; a++) {
                _html += '</tr>';
                for (let b in _data[a]) {
                    _html += '<td>' + _data[a][b] + '</td>';
                }
                _html += '</tr>';
            }
            _html += '</table>';
            return _html;
        }
        var table01 = new Table(_data);
        // document.write(table01.createTable());//不把创建的表格放入box中时，可以直接输出
        var _box = document.getElementById('box');//实现把创建的表格插入到一个box中
        _box.innerHTML = table01.createTable();



    </script>
</body>

</html>